<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱情小窝 - 登录/注册</title>

    <script src="/Style/js/tailwindcss.js"></script>
    <link href="/Style/css/font-awesome.min.css" rel="stylesheet">
    <link href="/Style/css/fonts.googleapis.com.css2" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF6B8B',
                        secondary: '#6A82FB',
                        accent: '#FFD166',
                        neutral: '#F8F9FA',
                        dark: '#2D3748'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-love {
                background: linear-gradient(135deg, #FF6B8B 0%, #6A82FB 100%);
            }
            .form-transition {
                transition: all 0.3s ease-in-out;
            }
            .input-error {
                border-color: #EF4444 !important;
            }
            .error-message {
                color: #EF4444;
                font-size: 0.875rem;
                margin-top: 0.25rem;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-md px-6 py-8 bg-white rounded-xl shadow-2xl">
        <div class="text-center mb-6">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary text-white mb-4">
                <i class="fa fa-heart text-2xl"></i>
            </div>
            <h2 class="text-2xl font-bold text-dark">爱情小窝</h2>
            <p class="text-gray-600 mt-2">记录美好时光</p>
        </div>

        <!-- 切换按钮 -->
        <div class="flex mb-8 rounded-lg overflow-hidden border border-gray-200">
            <button id="loginTab" class="flex-1 py-2 bg-primary text-white font-medium transition-colors">
                登录
            </button>
            <button id="registerTab" class="flex-1 py-2 bg-gray-100 text-gray-600 font-medium transition-colors">
                注册
            </button>
        </div>

        <!-- 登录表单 -->
        <div id="loginFormContainer" class="form-transition">
            <form id="loginForm">
                <div class="mb-4">
                    <label for="loginName" class="block text-gray-700 mb-2">用户名</label>
                    <input type="text" id="loginName" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" required>
                </div>
                <div class="mb-6">
                    <label for="loginPassword" class="block text-gray-700 mb-2">密码</label>
                    <input type="password" id="loginPassword" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" required>
                </div>
                <div id="loginError" class="mb-4 text-red-500 hidden"></div>
                <button type="submit" class="w-full py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors font-medium">
                    登录
                </button>
            </form>
        </div>

        <!-- 注册表单 (默认隐藏) -->
        <div id="registerFormContainer" class="form-transition hidden">
            <form id="registerForm">
                <div class="mb-4">
                    <label for="registerNickname" class="block text-gray-700 mb-2">昵称</label>
                    <input type="text" id="registerNickname" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" required>
                    <div id="nicknameError" class="error-message hidden">请输入昵称</div>
                </div>
                <div class="mb-4">
                    <label for="registerName" class="block text-gray-700 mb-2">账号</label>
                    <input type="text" id="registerName" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" required>
                    <div id="usernameError" class="error-message hidden">请输入账号</div>
                </div>
                <div class="mb-6">
                    <label for="registerPassword" class="block text-gray-700 mb-2">密码</label>
                    <input type="password" id="registerPassword" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" required>
                    <div id="passwordError" class="error-message hidden">密码长度不能少于6位</div>
                </div>
                <div id="registerError" class="mb-4 text-red-500 hidden"></div>
                <button type="submit" class="w-full py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors font-medium">
                    注册
                </button>
            </form>
        </div>

        <div class="mt-6 text-center">
            <p class="text-gray-500 text-sm">
                登录即表示同意我们的 <a href="#" class="text-secondary hover:underline">服务条款</a> 和 <a href="#" class="text-secondary hover:underline">隐私政策</a>
            </p>
        </div>
    </div>

    <script>
        // 表单切换逻辑
        const loginTab = document.getElementById('loginTab');
        const registerTab = document.getElementById('registerTab');
        const loginFormContainer = document.getElementById('loginFormContainer');
        const registerFormContainer = document.getElementById('registerFormContainer');

        // 切换到登录表单
        loginTab.addEventListener('click', () => {
            loginTab.classList.remove('bg-gray-100', 'text-gray-600');
            loginTab.classList.add('bg-primary', 'text-white');
            registerTab.classList.remove('bg-primary', 'text-white');
            registerTab.classList.add('bg-gray-100', 'text-gray-600');

            loginFormContainer.classList.remove('hidden');
            registerFormContainer.classList.add('hidden');

            // 清除错误信息
            clearAllErrors();
        });

        // 切换到注册表单
        registerTab.addEventListener('click', () => {
            registerTab.classList.remove('bg-gray-100', 'text-gray-600');
            registerTab.classList.add('bg-primary', 'text-white');
            loginTab.classList.remove('bg-primary', 'text-white');
            loginTab.classList.add('bg-gray-100', 'text-gray-600');

            registerFormContainer.classList.remove('hidden');
            loginFormContainer.classList.add('hidden');

            // 清除错误信息
            clearAllErrors();
        });

        // 清除所有错误信息
        function clearAllErrors() {
            document.getElementById('loginError').classList.add('hidden');
            document.getElementById('registerError').classList.add('hidden');
            document.getElementById('nicknameError').classList.add('hidden');
            document.getElementById('usernameError').classList.add('hidden');
            document.getElementById('passwordError').classList.add('hidden');

            // 移除输入框错误样式
            document.querySelectorAll('input').forEach(input => {
                input.classList.remove('input-error');
            });
        }

        // 验证注册表单
        function validateRegisterForm() {
            let isValid = true;
            const nickname = document.getElementById('registerNickname');
            const username = document.getElementById('registerName');
            const password = document.getElementById('registerPassword');

            // 验证昵称
            if (!nickname.value.trim()) {
                showError(nickname, 'nicknameError', '请输入昵称');
                isValid = false;
            } else {
                hideError(nickname, 'nicknameError');
            }

            // 验证用户名
            if (!username.value.trim()) {
                showError(username, 'usernameError', '请输入用户名');
                isValid = false;
            } else {
                hideError(username, 'usernameError');
            }

            // 验证密码
            if (password.value.length < 6) {
                showError(password, 'passwordError', '密码长度不能少于6位');
                isValid = false;
            } else {
                hideError(password, 'passwordError');
            }

            return isValid;
        }

        // 显示错误信息
        function showError(input, errorId, message) {
            input.classList.add('input-error');
            const errorElement = document.getElementById(errorId);
            errorElement.textContent = message;
            errorElement.classList.remove('hidden');
        }

        // 隐藏错误信息
        function hideError(input, errorId) {
            input.classList.remove('input-error');
            document.getElementById(errorId).classList.add('hidden');
        }

        // 登录表单提交
        document.getElementById('loginForm').addEventListener('submit', async function(e) {
            e.preventDefault();

            const loginError = document.getElementById('loginError');
            loginError.classList.add('hidden');

            const name = document.getElementById('loginName').value;
            const password = document.getElementById('loginPassword').value;

            try {
                const response = await fetch('/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ username: name, password: password })
                });

                const data = await response.json();

                if (data.status === 'success') {
                    // 登录成功，跳转到首页
                    window.location.href = '/';
                } else {
                    // 显示错误信息
                    loginError.textContent = data.message || '登录失败，请检查用户名和密码';
                    loginError.classList.remove('hidden');
                }
            } catch (error) {
                console.error('登录请求出错:', error);
                loginError.textContent = '服务器连接失败，请重试';
                loginError.classList.remove('hidden');
            }
        });

        // 注册表单提交
        document.getElementById('registerForm').addEventListener('submit', async function(e) {
            e.preventDefault();

            // 表单验证
            if (!validateRegisterForm()) {
                return;
            }

            const registerError = document.getElementById('registerError');
            registerError.classList.add('hidden');

            const nickname = document.getElementById('registerNickname').value;
            const name = document.getElementById('registerName').value;
            const password = document.getElementById('registerPassword').value;

            try {
                const response = await fetch('/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        nickname: nickname,
                        username: name,
                        password: password
                    })
                });

                const data = await response.json();

                if (data.status === 'success') {
                    // 注册成功，切换到登录表单并提示
                    alert('注册成功，请登录');
                    loginTab.click(); // 自动切换到登录
                    document.getElementById('loginName').value = name; // 填充用户名
                    document.getElementById('loginPassword').focus(); // 聚焦密码框
                } else {
                    // 显示错误信息
                    registerError.textContent = data.message || '注册失败，请稍后重试';
                    registerError.classList.remove('hidden');
                }
            } catch (error) {
                console.error('注册请求出错:', error);
                registerError.textContent = '服务器连接失败，请重试';
                registerError.classList.remove('hidden');
            }
        });

        // 为注册表单添加实时验证
        document.getElementById('registerPassword').addEventListener('input', function() {
            if (this.value.length < 6) {
                showError(this, 'passwordError', '密码长度不能少于6位');
            } else {
                hideError(this, 'passwordError');
            }
        });
    </script>
</body>
</html>
